<template>
  <div>
    <p>click {{count2}} times, count is {{evenOrOdd}}</p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
  </div>
</template>


<script>
/* 
store对象内部结构
  有2个重要属性: 用于组件中读取state数据
    state: store内部管理的state对象
    getters: store内部管理的getters计算属性
  有2个重要方法: 用于组件中更新state数据
    dispatch('action名称', data): 触发action调用
    commit('mutaion名称', data): 触发mutation调用

*/
  import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
  export default {
    name: 'App',

    

    computed: {
      // count () {
      //   return this.$store.state.count
      // },
      // evenOrOdd () {
      //   return this.$store.getters.evenOrOdd
      // }
      // ...mapState(['count']),  // {count () {return this.$store.state.count}}
      ...mapState({
        // count: 'count'
        count2: 'count',  // {count2 () {return this.$store.state.count}}
      }),

      ...mapGetters(['evenOrOdd'])
    },

    methods: {
      ...mapMutations({
        increment: 'INCREMENT',
        decrement: 'DECREMENT'
      }),
      ...mapActions(['incrementIfOdd', 'incrementAsync'])


      // increment () {
      //   this.$store.commit('INCREMENT')
      // },

      // decrement () {
      //   this.$store.commit('DECREMENT')
      // },

      // incrementIfOdd () {
      //   this.$store.dispatch('incrementIfOdd')
      // },
      // incrementAsync () {
      //   this.$store.dispatch('incrementAsync')
      // },
    }
  }
</script>

<style scoped>
  
</style>